<template>
	<view class="page">
		<view class="cell">
			<view class="cell-top flex flex-between">
				<view class="cell-label">实名认证用户</view>
				<view class="cell-top-right">
					<u-switch v-model="realname" activeColor="#FA9700" size="40"></u-switch>
				</view>
			</view>
		</view>
		<view class="cell">
			<view class="cell-top flex flex-between">
				<view class="cell-label">性别</view>
				<view class="cell-top-right">
					<view class="checkbox-group">
						<view class="checkbox" :class="item.value==form.sex?'active':''" v-for="(item,index) in sexList"
							:key="index" @tap="radioClick(item)">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cell">
			<view class="cell-top flex flex-between">
				<view class="cell-label">年龄（{{age[0]}}-{{age[1]}}）</view>
			</view>
			<cj-slider class="slider" v-model="age" :min="18" :max="50" :step="1" :height="10" :blockWidth="40"
				activeColor="#FA9700" />
			<view class="flex flex-between">
				<view class="cell-text">18</view>
				<view class="cell-text">50</view>
			</view>
		</view>
		<view class="cell">
			<view class="cell-top flex flex-between">
				<view class="cell-label">身高（{{height[0]}}-{{height[1]}}）</view>
			</view>
			<cj-slider class="slider" v-model="height" :min="160" :max="198" :step="1" :height="10" :blockWidth="40"
				activeColor="#FA9700" />
			<view class="flex flex-between">
				<view class="cell-text">160</view>
				<view class="cell-text">198</view>
			</view>
		</view>
		<view class="cell">
			<view class="cell-top flex flex-between">
				<view class="cell-label">体重（{{weight[0]}}-{{weight[1]}}）</view>
			</view>
			<cj-slider class="slider" v-model="weight" :min="40" :max="80" :step="1" :height="10" :blockWidth="40"
				activeColor="#FA9700" />
			<view class="flex flex-between">
				<view class="cell-text">40</view>
				<view class="cell-text">80</view>
			</view>
		</view>

		<view class="cell" style="position: relative; z-index: 999;">
			<view class="cell-top">
				<view class="cell-label">星座</view>
			</view>
			<view>
				<view class="checkbox-group">
					<view v-for="(item,index) in constellationList" :key="item.id" class="checkbox"
						:class="item.checked?'active':''" @click="checkClick(index,constellationList)">{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="cell" style="position: relative; z-index: 999;">
			<view class="cell-top">
				<view class="cell-label">兴趣</view>
			</view>
			<view>
				<view class="checkbox-group">
					<view v-for="(item,index) in hobyList" :key="item.id" class="checkbox"
						:class="item.checked?'active':''" @click="checkClick(index,hobyList)">{{item.name}}</view>
				</view>
			</view>
		</view>

		<view style="position: fixed; bottom: 0;  z-index: 999; " class="btn-bottom" @tap="toSearch()">¥{{piPrice}}开始匹配
		</view>
	</view>
</template>

<script>
	import {
		matchingCreateOrder,
		getWorkList,
		hobbyList,
		matchPrice
	} from "@/common/config/chat.js"
	import cjSlider from '@/components/cj-slider/cj-slider.vue'
	export default {
		components: {
			cjSlider
		},
		data() {
			return {
				form: {
					realname: 0,
					sex: 0,
					age_min: '',
					age_max: '',
					height_min: '',
					height_max: '',
					weight_min: '',
					weight_max: '',
					constellation: '',
					likeIds: ''
				},
				realname: false,
				age: [18, 50],
				height: [160, 198],
				weight: [40, 80],
				sexList: [{
					name: '男',
					value: 1
				}, {
					name: '女',
					value: 0
				}],
				sex: '',
				constellationList: [{
						name: '白羊座',
						id: 1
					},
					{
						name: '金牛座',
						id: 2
					},
					{
						name: '双子座',
						id: 3
					},
					{
						name: '巨蟹座',
						id: 4
					},
					{
						name: '狮子座',
						id: 5
					},
					{
						name: '处女座',
						id: 6
					},
					{
						name: '天秤座',
						id: 7
					},
					{
						name: '天蝎座',
						id: 8
					},
					{
						name: '射手座',
						id: 9
					},
					{
						name: '摩羯座',
						id: 10
					},
					{
						name: '水瓶座',
						id: 11
					},
					{
						name: '双鱼座',
						id: 12
					},

				],
				likeList: [],
				hobyList: [],
				likeLists: [],
				piPrice: "",
			}
		},
		onShow() {
			this.getLikeList()
		},
		methods: {
			search() {
				uni.navigateTo({
					url: '/pages/Search/Search'
				})
			},
			getLikeList() {
				getWorkList().then(res => {
					this.likeList = res.data.data
				})
				matchPrice().then(resed => {
					console.log(resed, '筛选价格')
					if (resed.data.code == 1) {
						this.piPrice = resed.data.data.val
					}
				})
				this.getHobyList()
			},
			getHobyList() {
				hobbyList({}).then(res => {
					this.hobyList = res.data.data
				})
			},
			reset() {

			},
			checkClick(index, list) {
				const item = list[index]
				console.log(item)
				item.checked = !item.checked
				this.$set(list, index, item)
			},
			radioClick(val) {
				this.sex = val.name
				this.form.sex = val.value
			},
			getCheckedVal(list) {
				const checkedArr = []
				list.map(item => {
					if (item.checked) {
						checkedArr.push(item.name)
					}
				})
				return checkedArr.join(',')
			},
			getCheckedIds(list) {
				const checkedArr = []
				list.map(item => {
					if (item.checked) {
						checkedArr.push(item.id)
					}
				})
				return checkedArr.join(',')
			},
			toSearch() {
				// console.log(this.getCheckedIds(this.likeList))
				this.form.realname = Number(this.realname)
				this.form.constellation = this.getCheckedVal(this.constellationList)
				this.form.likeIds = this.getCheckedIds(this.likeList)
				this.form.age_min = this.age[0]
				this.form.age_max = this.age[1]
				this.form.weight_min = this.weight[0]
				this.form.weight_max = this.weight[1]
				this.form.height_min = this.height[0]
				this.form.height_max = this.height[1]
				// console.log('设置选项',this.form)
				const data = {
					content: JSON.stringify(this.form)
				}
				matchingCreateOrder(data).then(res => {
					console.log('匹配结果',res.data.data.order_no)

					// const price = 10
					console.log(this.piPrice,'99999999999999999999')
					if (this.piPrice > 0) {
						uni.navigateTo({
							url: '/pages/pay/pay?orderId=' + res.data.data.order_no + '&price=' + this
								.piPrice + '&form=' + JSON.stringify(this.form)
						})
					}else{
						uni.redirectTo({
							url:'/pages/Search/Search?pay=payok&form='+ JSON.stringify(this.form)+'&orderId='+res.data.data.order_no
						})
					}
				})

			}
		}
	}
</script>
<style scoped lang="less">
	.page {
		padding-bottom: 140rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-between {
		justify-content: space-between;
	}

	.cell {
		padding: 30rpx 30rpx;

		.cell-label {
			font-size: 30rpx;
			color: #333333;
		}

		.cell-text {
			font-size: 24rpx;
			color: #999;
		}

	}

	.slider {
		margin: 60rpx 20rpx;
	}

	.checkbox-group {
		padding: 10rpx 0;

		.checkbox {
			padding: 4rpx 30rpx;
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #999;
			border: 1px solid #999;
			display: inline-block;
			margin: 16rpx 10rpx;

			&.active {
				background: #FA9700;
				color: #fff;
				border-color: #FA9700;
			}
		}
	}

	.btn-bottom {
		width: 702rpx;
		text-align: center;
		font-size: 36rpx;
		line-height: 98rpx;
		height: 98rpx;
		background: #FA9700;
		color: #fff;
		border-radius: 300px;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);

	}
</style>
